
// 分类数据方法抽离
import { findSubCategoryFilter } from '@/api/category'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export function useCategoryData () {
  const route = useRoute()
  // 模板的渲染是有两次：
  // 1. 第一次数据接口请求还未回来的时候，先进性一次模板渲染，以声明的响应式数据的默认值读取
  // 2. 第二次渲染是数据请求回来之后 修改了响应式数据
  const subCategoryData = ref({})
  // 获取二级类目数据
  async function loadData () {
    const res = await findSubCategoryFilter(route.params.id)
    console.log('二级类目', res)
    // 在品牌brands数组 头部添加一个 全部 分类  unshift 保持数据结构字段一致
    res.result.brands.unshift({ id: null, name: '全部' })
    // 在 saleProperties 数组中的properties数组 头部添加一个 全部 分类  unshift 保持数据结构字段一致
    res.result.saleProperties.forEach(item => {
      item.properties.unshift({
        id: null,
        name: '全部'
      })
      // properties中每一项添加 一个selected字段, 用来控制是否激活字段 selected:true 激活添加active类名, false 未激活取消active类名
      item.properties.forEach(it => {
        it.selected = false
      })
    })
    subCategoryData.value = res.result
  }

  onMounted(() => {
    loadData() // 获取二级分类数据
  })

  return { subCategoryData }
}

// 功能抽离
// 新建一个js文件，在里面创建一个以use开头的方法，把响应式数据return出去(功能实现方法直接复制写好的)
